<template>
  <div class="excel-import-form">
    <el-form :model="form">
      <el-form-item label="重命名方式">
        <el-select v-model="form.importRenameMethod">
          <el-option label="按顺序重命名" value="0" />
          <el-option label="自动匹配重命名" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="导入文件名">
        <el-icon class="icon"><QuestionFilled /></el-icon>
        <el-link type="primary" @click="handleImgDisplay">{{
          tipText
        }}</el-link>
      </el-form-item>
      <el-form-item v-show="excelTipImg1">
        <el-card class="card">
          <img
            style="width: 100%; vertical-align: top"
            src="@renderer/assets/img/ExcelTip1.jpg"
          />
        </el-card>
      </el-form-item>
      <el-form-item v-show="excelTipImg2">
        <el-card class="card">
          <img
            style="width: 100%; vertical-align: top"
            src="@renderer/assets/img/ExcelTip2.jpg"
          />
        </el-card>
      </el-form-item>
      <!-- 如果没有导入内容 -->
      <template v-if="!excelInitialData.excelFileName">
        <el-form-item>
          <el-button type="primary" @click="handleImportExcel">
            <el-icon :size="16" class="el-icon--left"><Upload /></el-icon>
            点击导入 Excel 表格
          </el-button>
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item>
          <div class="excel-oper">
            <div class="excel-select" @click="handleImportExcel">
              <div class="excel-input">
                <img :src="ExcelIcon" />
                <span class="excel-name nowrap">
                  {{ excelInitialData.excelFileName }}
                </span>
              </div>
              <el-icon
                :size="16"
                color="#909399"
                @click.stop="fileRenameExcelStore.resetCurMethodData()"
              >
                <CircleClose />
              </el-icon>
            </div>
            <el-button class="btn" text bg @click="handleImportExcel">
              更换表格
            </el-button>
            <el-tooltip content="打开文件夹">
              <el-icon
                :size="24"
                color="#909399"
                class="folder-icon"
                @click="openFolder"
                ><FolderOpened
              /></el-icon>
            </el-tooltip>
          </div>
        </el-form-item>
      </template>
    </el-form>
    <tip-dialog />
  </div>
</template>

<script lang="ts" setup>
import TipDialog from './TipDialog/index.vue'
import ExcelIcon from '@renderer/assets/icon/ExcelIcon.svg'
import {
  QuestionFilled,
  Upload,
  CircleClose,
  FolderOpened
} from '@element-plus/icons-vue'
import useExcelTipImage from './hooks/useExcelTipImage'
import useExcelImport from './hooks/useExcelImport'
import useFileRenameExcelStore from '@renderer/store/Excel/FileRenameExcelStore'
import { storeToRefs } from 'pinia'
import { computed } from 'vue'

const fileRenameExcelStore = useFileRenameExcelStore()
const { form } = storeToRefs(fileRenameExcelStore)

const excelInitialData = computed(() => {
  return fileRenameExcelStore.getExcelInitialData()
})

// 提示图片的操作逻辑
const { excelTipImg1, excelTipImg2, handleImgDisplay, tipText } =
  useExcelTipImage()

// Excel 文件上传逻辑
const { handleImportExcel, openFolder } = useExcelImport()
</script>

<style lang="less" scoped>
.excel-import-form {
  color: var(--el-text-color-regular);

  :deep(.el-card__body) {
    padding: 10px;
  }

  .card {
    margin-top: -12px;
  }

  .el-link--primary {
    line-height: 24px;
  }

  .icon {
    margin-right: 6px;
    font-size: 18px;
    color: var(--el-color-primary);
  }

  .el-button {
    width: 100%;
  }

  .el-icon--left {
    margin-right: 16px;
  }

  .excel-oper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .btn {
      width: 80px;
      margin: 0 8px;
    }

    .excel-select {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      border: 1px solid var(--el-border-color);
      padding: 0 6px;
      height: 30px;
      line-height: 30px;
      border-radius: 4px;
      cursor: pointer;

      .excel-input {
        flex: 1;
        display: flex;
        align-items: center;

        .excel-name {
          width: 148px;
        }

        img {
          width: 22px;
          margin-right: 8px;
        }
      }
    }

    .folder-icon {
      cursor: pointer;
    }
  }
}
</style>
